<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container"></div>
        <form class="row">
            <div class="mb-3 col">
                <label class="form-label">省份/直辖市名字</label>
                <!-- 省份输入框 -->
                <input type="text" value="北京" class="form-control province" placeholder="请输入省份名称" />
            </div>
            <div class="mb-3 col">
                <label class="form-label">城市名字</label>
                <!-- 城市输入框 -->
                <input type="text" value="北京市" class="form-control city" placeholder="请输入城市名称" />
            </div>
        </form>
        <!-- 查询按钮 -->
        <button type="button" class="btn btn-primary my-button">查询</button>
        <br><br>
        <p>地区列表: </p>
        <ul class="list-group">
            <!-- 渲染的列表项 -->
            <li class="list-group-item">东城区</li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
//   http://hmajax.itheima.net/api/area
//   传递某个省份内某个城市的所有区县
//   查询参数名：pname、cname
//   pname说明：传递省份或直辖市名，比如 北京、湖北省…
//   cname说明：省份内的城市，比如 北京市、武汉市…
//   核心功能：查询地区，并渲染列表
    let btn = document.querySelector('.btn')
    
    btn.addEventListener('click',()=>{  
        let cs = document.querySelector('.city')
        let sf = document.querySelector('.province')
        let ul = document.querySelector('.list-group')
        ul.innerHTML=''
        axios({
            url:'http://hmajax.itheima.net/api/area',
            params:{
                    pname:sf.value,
                    cname:cs.value
                }
        }).then(e=>{
            let a = e.data.list
            console.log(e.data.list,a);
            const m = a.map((e)=>{
                
                ul.innerHTML+=`<li class="list-group-item">${e}</li>`
            }).join("")
        })
    })
    </script>
</body>
</html>